<template>
	<div>
		<aplid-base-crud
			:key="key"
			layout="card"
			ref="crud"
			class="w-100"
			v-bind="{ ...baseConfig, ...$attrs }"
			:paramsObj="paramsObj"
			@getTableData="getTableData"
		>
			<template #search>
				<div style="margin-bottom: 20px">
					项目年份：
					<el-radio-group v-model="radio" @change="radioChange">
						<el-radio :label="undefined" border>全部</el-radio>
						<el-radio v-for="item in yearList" :label="item.value" border>{{ item.label }}</el-radio>
					</el-radio-group>
				</div>
			</template>
			<template v-slot:column="{ row }">
				<div class="big_card" @click="tiView(row)">
					<el-image class="img_part" :src="row.organizationLogo || emitImg" alt="机构logo"></el-image>
					<div class="content_part tc">
						<h4 class="text-overflow" style="--overflow-width: 300px">
              <el-popover
								placement="top-start"
								title="机构名称"
								:width="200"
								trigger="hover"
								:content="row.orgName"
							>
								<template #reference> {{ row.orgName }}</template>
							</el-popover>
            </h4>
						<el-text class="mx-1" style="cursor: pointer;" type="primary">查看档案</el-text>
						<div>机构负责人：{{ row.burdenUserName }}</div>
						<div>联系电话：{{ row.burdenUserPhone }}</div>
						<div class="text-overflow" style="--overflow-width: 300px">
							<el-popover
								placement="top-start"
								title="详细地址"
								:width="200"
								trigger="hover"
								:content="row.orgAddress"
							>
								<template #reference> 详细地址：{{ row.orgAddress }} </template>
							</el-popover>
						</div>
					</div>
				</div>
			</template>
		</aplid-base-crud>
	</div>
</template>

<script setup lang="ts">
import { baseConfig } from './config'
import apiMod from '@/apiMod'
import { getStore } from '@/utils/store'
let emit = defineEmits(['getRow', 'getableData'])
let radio = ref(undefined)
let paramsObj = ref({})
let yearList = ref([])
let key = ref(1)
let crud = ref()
const emitImg = 'https://aplid-51.oss-cn-hangzhou.aliyuncs.com/empty.png'

// 初始化全局参数
paramsObj.value = {
	authArea:getStore('userInfo').authArea,
	authCity:getStore('userInfo').authCity,
	authCommunity:getStore('userInfo').authCommunity,
	authProvince:getStore('userInfo').authProvince,
	authStreet:getStore('userInfo').authStreet,
	organizationId:getStore('userInfo').organizationId,
	subsidyProjectYear: radio.value,
}
// 根据年来获取归档机构
const getArchiveIns = () => {
	apiMod.view_ofsSubsidyProject_years().then((res) => {
		yearList.value = res.data.map((el) => {
			return { label: el + '年', value: `${el}` }
		})
	})
}
getArchiveIns()

// 跳转到具体分类页
const tiView = (row) => {
	emit('getRow', row)
}

// redio切换
const radioChange = () => {
	paramsObj.value = {
		authArea:getStore('userInfo').authArea,
		authCity:getStore('userInfo').authCity,
		authCommunity:getStore('userInfo').authCommunity,
		authProvince:getStore('userInfo').authProvince,
		authStreet:getStore('userInfo').authStreet,
		organizationId:getStore('userInfo').organizationId,
		subsidyProjectYear: radio.value,
	}
	key.value = Math.random()
}
// 拿到表格数据
const getTableData = (data) => {
	emit('getableData', data)
}
</script>
<style scoped lang="scss">
.big_card {
	height: 100%;
	width: 100%;

	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;

	.img_part {
		height: vw(140);
		width: 100%;
	}

	.content_part {
		height: 45%;
		width: 100%;

		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
	}
}
</style>
